import AutoChart from '@/components/Echarts/AutoChart';
// @ts-ignore
import 'echarts-gl';
import React from 'react';
import { useImmer } from 'use-immer';
import './Chart3.less';
import routes from './data/route.json';
import img2 from './images/bathymetry_bw_composite_4k.jpg';
import img1 from './images/map.jpg';

const ColumnCharts: React.FC = () => {
  const [options, setOptions] = useImmer({
    globe: {
      baseTexture: img1,
      heightTexture: img2,
      displacementScale: 0.04, //地球顶点位移的大小。默认为 0， 也就是没位移，
      realisticMaterial: {
        roughness: 0.5, //属性用于表示材质的粗糙度，0为完全光滑，1完全粗糙，中间的值则是介于这两者之间。
      },
      left: 20,
      right: 20,
      bootom: 50,
      // shading: 'realistic',
      light: {
        main: {
          intensity: 1, //主光源的强度。
          shadow: true, //主光源是否投射阴影。默认为关闭
        },
        ambient: {
          intensity: 1,
        },

        ambientCubemap: {
          // texture: "../img/pisa.hdr",  //环境光贴图的 url，支持使用.hdr格式的 HDR 图片。可以从 http://www.hdrlabs.com/sibl/archive.html 等网站获取 .hdr 的资源。
          diffuseIntensity: 6, //// 解析 hdr 时使用的曝光值
        },
        postEffect: {
          //后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果
          enable: true,
          bloomIntensity: 0.1,
        },
      },
      atmosphere: {
        show: true,
        glowPower: 22,
        // innerGlowPower: 12
      },
      viewControl: {
        autoRotate: true,
        distance: 250
      },
    },
    series: {
      type: 'lines3D',
      coordinateSystem: 'globe',
      blendMode: 'lighter',
      effect: {
        //箭头
        show: true,
        trailWidth: 3.5,
        trailLength: 0.2,
        trailOpacity: 0.7,
        trailColor: '#66e4fe',
      },
      lineStyle: {
        //线路
        width: 0,
        color: '#66e4fe',
        opacity: 0.8,
      },
      data: routes,
    },
  });

  return (
    <div className='chart3'>
      <AutoChart option={options as any}></AutoChart>
    </div>
  );
};
export default ColumnCharts;
